<!-- 三角形 -->
<template>
 <div class="triangle">
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
   <div class="four"></div>
 </div>
</template>

<script>

export default {
  name: 'Triangle',
  mounted() {},
  computed: {},
  props: {},
  data() {
    return {
    };
  },
  methods: {},
};
</script>

<style lang='less' scoped>
.triangle {
  display: flex;

  .one {
    width: 0px;
    height: 0px;
    // border-width 上 左右 下
    border-width: 0 60px 60px;
    border-style: solid;
    border-color: transparent transparent @primary-color;
  }

  .two {
    position: relative;
    width: 0px;
    height: 0px;
    border-width: 0 60px 60px;
    border-style: solid;
    border-color: transparent transparent @primary-color;
    margin-left: 20px;
  }
  
  .two::after {
    content: "";
    position: absolute;
    top: 6px;
    left: -50px;
    border-width: 0 50px 50px; 
    border-style: solid;
    border-color: transparent transparent yellow;
  }

  .three {
    width: 0px;
    height: 0px;
    border-width: 0 60px 60px 0;
    border-style: solid;
    border-color: transparent transparent @primary-color;
    margin-left: 20px;
  }

  .four {
    width: 0px;
    height: 0px;
    border-width: 0 0 60px 60px;
    border-style: solid;
    border-color: transparent transparent @primary-color;
    margin-left: 20px;
  }
}
</style>
